<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
            var City=document.getElementById("city");
            var child1=document.getElementById("BeiJing");
            var child2=child1.nextElementSibling;
            var child3=child2.nextElementSibling;
            var child4=child3.nextElementSibling;
            var child5=child4.nextElementSibling; 
            var child6=child5.nextElementSibling;  
            var child7=child6.nextElementSibling;   

            child1.onclick=function(){
                City.removeChild(child1);
            } 

            child2.onclick=function(){
                City.removeChild(child2);
            } 

            child3.onclick=function(){
                City.removeChild(child3);
            } 

            child4.onclick=function(){
                City.removeChild(child4);
            } 

            child5.onclick=function(){
                City.removeChild(child5);
            } 

            child6.onclick=function(){
                City.removeChild(child6);
            } 

            child7.onclick=function(){
                City.removeChild(child7);
            } 
        }
    </script>
</head>
<body>
    <p style="color:#0000ff">旅游城市:</p>
    <ul id="city">
        <li id="BeiJing">北京</li>
        <li>上海</li>
        <li>重庆</li>
        <li id="ChengDu">成都</li>
        <li>天津</li>
        <li>广州</li>
        <li>昆明</li>
    </ul>
</body>
</html>